<template>
  <!-- 新契约工作列表模块-end单 -->
  <div class="fillcontain">
    <bt-col-header title="流程版本比较"></bt-col-header>
    <div class="page-content">
      <!-- 标题 -->
      <div class="fastQuery bgfff">
        <el-row>
          <el-col :span="6" class="fastQuery_title">
            <i class="el-icon-document"></i><span> 流程版本对比</span>
          </el-col>
        </el-row>
      </div>
      <!-- 查询表单 -->

      <div class="contain">
        <!-- 查询表单 -->
        <el-form :model="searchParams" ref="ruleForm" label-width="120px" class="search_container">
          <el-row>
            <el-col :span="6">
              <el-form-item label="流程" prop="flowIdentify">
                <el-select clearable :filterable="true" v-model="searchParams.flowIdentify" @change="flowChangeHandle" placeholder="请选择">
                  <el-option v-for="(item, i) in flows" :key="i" :label="item.flowName" :value="item.flowIdentify">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对比版本1" prop="sourceVersion">
                <el-select clearable v-model="searchParams.sourceVersion" filterable placeholder="请选择">
                  <el-option v-for="item in versions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对比版本2" prop="targetVersion">
                <el-select clearable v-model="searchParams.targetVersion" filterable placeholder="请选择">
                  <el-option v-for="item in versions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="text_center">
              <el-button :plain="true" type="info" @click="compare">对比</el-button>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>版本：{{edition1}}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="showCode('1')">源码</el-button>
                </div>
                <AntvFlow ref="sourceAntvFlow" :width="antvFlowWidth" readonly v-show="sourceFlag"></AntvFlow>
                <!-- <div id="sourceMountNode" v-show="sourceFlag"></div> -->
                <div class="code">
                  <codemirror v-if="!sourceFlag" ref="mycode" :value="soruceData.flowJava" v-model="soruceData.flowJava" :options="cmOptions" class="code">
                  </codemirror>
                </div>
              </el-card>
            </el-col>
            <el-col :span="11" class="ml10">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>版本：{{edition2}}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="showCode('2')">源码</el-button>
                </div>
                <AntvFlow ref="targetAntvFlow" :width="antvFlowWidth" readonly v-show="targetFlag"></AntvFlow>
                <!-- <div id="targetMountNode" v-show="targetFlag"></div> -->
                <codemirror v-if="!targetFlag" ref="mycode" :value="targetData.flowJava" v-model="targetData.flowJava" :options="cmOptions" class="code">
                </codemirror>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
        <div class="content-footer">
          <el-button @click="toList">返回</el-button>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import AntvFlow from "@/components/antv-flow";
import { listFlowData } from "@/api/ruleConfig/flow";
import { flowCompare } from "@/api/version/version";
import { init } from "@/utils/g6ShowUtils.min.js";
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
export default {
  components: {
    codemirror,
    AntvFlow
  },
  data() {
    return {
      antvFlowWidth: 100,
      flows: [],
      edition1: '',
      edition2: '',
      versions: [],
      searchParams: {
        flowIdentify: "",
        sourceVersion: "",
        targetVersion: "",
      },
      soruceData: {
        ruleFlow: {},
        flowJava: "",
      },
      targetData: {
        ruleFlow: {},
        flowJava: "",
      },
      sourceFlag: true,
      targetFlag: true,
      sourceShow: false,
      targetShow: false,
      sourceGrape: null,
      targetGrape: null,
      cmOptions: {
        value: "",
        mode: "x-java",
        theme: "ambiance",
        readOnly: false,
        lineNumbers: true,
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.antvFlowWidth = this.$refs['sourceAntvFlow'].$el.offsetWidth;
    this.$nextTick(() => {
      this.$refs['sourceAntvFlow'].init();
      this.$refs['targetAntvFlow'].init();
    })
    
  },
  methods: {
    toList() {
      this.$router.push({ path: "/drools-version/flowlist" });
    },
    getList() {
      this.flows = [];
      // this.$store.dispatch('loading/CHANGE_LOADING', true)
      listFlowData({}).then((res) => {
        // this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.data.data) {
          let data = res.data.data;
          let arr = Object.keys(data);
          let arrvalue = Object.values(data);
          arrvalue.forEach((e, i) => {
            this.flows.push({ flowName: arr[i], flowIdentify: e });
          });
        }
      });
    },
    flowChangeHandle(value) {
      // console.log(value, "value");
      this.versions = [];
      listFlowData({ flow_identify: value }).then(({ data }) => {
        // console.log(data);
        if (data.resultCode === 0) {
          data.data.forEach((e, i) => {
            this.versions.push({ label: e, value: e });
          });
        }
      });
    },
    compare() {
      this.edition1 = this.searchParams.sourceVersion
      this.edition2 = this.searchParams.targetVersion
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      flowCompare(this.searchParams).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if (res.data.data) {
          // this.soruceData.edges = res.data.data.source.edges;
          // this.soruceData.nodes = res.data.data.source.nodes;
          this.soruceData.ruleFlow = res.data.data.source.ruleFlow;
          // this.soruceData.flowJava = res.data.data.source.flowJava;
          // this.initFlow("sourceMountNode", this.soruceData);
          // this.targetData.edges = res.data.data.target.edges;
          // this.targetData.nodes = res.data.data.target.nodes;
          this.targetData.ruleFlow = res.data.data.target.ruleFlow;
          // this.targetData.flowJava = res.data.data.target.flowJava;
          // this.initFlow("targetMountNode", this.targetData);

          // 清空画布
          this.$refs['sourceAntvFlow'].clearFlow();
          this.$refs['targetAntvFlow'].clearFlow();
          // 使用antv/x6替换      
          this.$refs['sourceAntvFlow'].applyFlowData(this.soruceData.ruleFlow.flowImg);
          this.$refs['targetAntvFlow'].applyFlowData(this.targetData.ruleFlow.flowImg);
          // 居中
          this.$refs['sourceAntvFlow'].centerFlow();
          this.$refs['targetAntvFlow'].centerFlow();
          
        }
      });
    },
    showCode(type) {
      if (type === "1") {
        this.sourceFlag = !this.sourceFlag;
        if (this.sourceFlag) {
          // this.initFlow("sourceMountNode", this.soruceData);  
          this.$nextTick(() => {
            // 清空画布
            this.$refs['sourceAntvFlow'].clearFlow();
            // 重新绘制
            this.$refs['sourceAntvFlow'].applyFlowData(this.soruceData.ruleFlow.flowImg);
            // 居中
            this.$refs['sourceAntvFlow'].centerFlow();
          })
        }
      }
      if (type === "2") {
        this.targetFlag = !this.targetFlag;
        if (this.targetFlag) {
          // this.initFlow("targetMountNode", this.soruceData);
          this.$nextTick(() => {
            // 清空画布
            this.$refs['targetAntvFlow'].clearFlow();
            // 重新绘制
            this.$refs['targetAntvFlow'].applyFlowData(this.targetData.ruleFlow.flowImg);
            // 居中
            this.$refs['targetAntvFlow'].centerFlow();
          })
        }
      }
    },
    initFlow(id, data) {
      if (id === "sourceMountNode") {
        if (this.sourceGrape !== null) {
          this.sourceGrape.changeData(data);
          this.sourceGrape.paint();
        } else {
          this.sourceGrape = init(id, 620, 835, data);
        }
      }
      if (id === "targetMountNode") {
        if (this.targetGrape !== null) {
          this.targetGrape.changeData(data);
          this.targetGrape.paint();
        } else {
          this.targetGrape = init(id, 620, 835, data);
        }
      }
    },
  },
  watch: {},
  computed: {},
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.CodeMirror {
  border: 1px solid #eee;
  height: 1000px;
}
.text_center {
  text-align: center;
}
</style>



